<template>
  <div>
    <Scrolltop></Scrolltop>

    <!--头部-->
    <div class="top">
      <img @click="goback()" class="top-back" src="../../../static/bmqd/BMQD-1.png" alt="">
      <span>{{title}}</span>
      <div class="top-right">
        <router-link to="/shcont">
          <img src="../../../static/XSDH/购物车前.png" alt="">
        </router-link>
        <img @click="fenxiang()" src="../../../static/XSDH/分享.png" alt="">
        <img src="../../../static/XSDH/首页前.png" alt="">
      </div>
    </div>


    <!--中间内容区-->
    <p class="title">宝贝即将售罄，再不抢就没了哦~</p>

    <div class="con-wrap" v-for="i in arr">
      <div class="con-left">
        <img :src="i.url" />
      </div>
      <div class="con-right">
        <h4>{{i.tit}}</h4>
        <h5>{{i.tit1}}</h5>
        <p>
          <span>{{i.tit2}}</span>
          <button class="btn">马上抢 ></button>
        </p>
        <h6>还剩<span>{{i.tit3}}</span></h6>
      </div>
    </div>

    <div v-if="show">
      <!--遮罩层-->
      <div class="zzc" @touchmove.prevent>
        <div class="fx" >
          <div class="fx-wrap">

            <div class="fx-logo" v-for="item in fx">
              <div class="logo">
                <img :src="item.url1" alt="">
              </div>
              <p>{{item.text}}</p>
            </div>

          </div>
          <button @click="quxiao()" class="fx-btn">取消</button>
        </div>
      </div>
      <!--分享区-->

    </div>

  </div>
</template>

<script>
  import Scrolltop from './Scrolltop'
  export default {
    name: "Xianshi",
    data(){
      return{
        title:'限时断货',
        show:false,
        arr:[
          {url:require('../../../static/XSDH/timg1pg.png'),tit:'手撕面包105g',tit1:'口感一流  营养又美味',tit2:'￥29.9',tit3:'01:59:59'},
          {url:require('../../../static/XSDH/timg1pg.png'),tit:'手撕面包105g',tit1:'口感一流  营养又美味',tit2:'￥29.9',tit3:'01:59:59'},
          {url:require('../../../static/XSDH/timg1pg.png'),tit:'手撕面包105g',tit1:'口感一流  营养又美味',tit2:'￥29.9',tit3:'01:59:59'},
          {url:require('../../../static/XSDH/timg1pg.png'),tit:'手撕面包105g',tit1:'口感一流  营养又美味',tit2:'￥29.9',tit3:'01:59:59'},
          {url:require('../../../static/XSDH/timg1pg.png'),tit:'手撕面包105g',tit1:'口感一流  营养又美味',tit2:'￥29.9',tit3:'01:59:59'}
        ],
        fx:[
          {url1:require('../../../static/logo/pengyouquan.png'),text:'微信朋友圈'},
          {url1:require('../../../static/logo/weixin.png'),text:'微信好友'},
          {url1:require('../../../static/logo/QQ.png'),text:'QQ好友'},
          {url1:require('../../../static/logo/QQkongjian.png'),text:'QQ空间'},
          {url1:require('../../../static/logo/weibo.png'),text:'微博'},
          {url1:require('../../../static/logo/fuzhilianjie.png'),text:'复制链接'}
        ]
      }
    },
    components:{
      Scrolltop
    },
    methods:{
      fenxiang(){
        this.show='true';
      },
      quxiao(){
        this.show=!this.show;
      },
      goback(){
        history.go(-1);
      }
    }
  }
</script>

<style scoped>
  .top{
    width: 69rem;
    height: 3rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top span{
    font-size: 3.6rem;
    color: #fff;
    margin-left: 12rem;
  }
  .top img{
    width: 3rem;
    height: 3rem;
  }
  .top-right{
    width: 20rem;
    display: flex;
    justify-content: space-between;
  }
  .title{
    width: 70rem;
    height: 8rem;
    line-height: 8rem;
    background: #f2f2f2;
    font-size: 3rem;
    color: #4d4d4d;
    padding-left: 2rem;
  }
  .con-wrap{
    width: 68rem;
    height: 16rem;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .con-wrap:last-child{
    border-bottom:none;
  }
  .con-left{
    width: 18rem;
    height: 16rem;
    border: .1rem solid #ccc;
  }
  .con-left img{
    width: 100%;
    height: 100%;
    vertical-align: bottom;
  }

  .con-right{
    width: 48rem;
    height: 16rem;
  }
  .con-right h4{
    color: #333333;
    font-size: 3rem;
  }
  .con-right h5{
    color: #4d4d4d;
    font-size: 2.4rem;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
  }
  .con-right p{
    display: flex;
    justify-content: space-between;
  }
  .con-right p span{
    color: #e53e42;
    font-size: 2.8rem;
  }
  .con-right p .btn{
    width: 12rem;
    height: 4rem;
    background: #e53e42;
    border-radius: 2rem;
    color: #fff;
    font-size: 1.8rem;
  }
  .con-right h6{
    color: #4d4d4d;
    font-size: 1.6rem;
    text-align: right;
    margin-top: .5rem;
  }
  .con-right h6 span{
    color: #e53e42;
    margin-right: 2rem;
  }



  .zzc{
    position: fixed;
    left: 0;
    top: 0;
    width: 72rem;
    height: 200rem;
    background: rgba(0,0,0,0.4);
    z-index: 600;
  }
  .fx{
    position: fixed;
    bottom: 0;
    width: 72rem;
    height: 45rem;
    background: #fff;
    text-align: center;
    z-index: 666;
  }
  .fx-wrap{
    width: 64rem;
    height: 31rem;
    padding:3rem 4rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .fx .fx-logo{
    width: 17rem;
    height: 15rem;
  }
  .fx-logo .logo{
    width: 7rem;
    height: 7rem;
    padding: 1.5rem 5rem;
  }
  .fx-logo .logo img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
  .fx-logo p{
    width: 100%;
    height: 5rem;
    font-size: 2.4rem;
    color: #333333;
  }

  .fx-btn{
    width: 17rem;
    height: 5rem;
    font-size: 2.4rem;
    color: #fff;
    background: #e53e42;
    border-radius: .5rem;

  }
</style>
